<template>
	<view>
		<view class="header">
			<view class="headerShow" @click="selectGoods">
				<image :src="detail.goodsDetail.img"/>
				<view>{{detail.goodsDetail.name}}</view>
				<text v-if="detail.d.goods.length>1" class="iconfont icon-xiajiantou" :class="{active: goodsSelectShow}"></text>
			</view>
			<view v-if="detail.d.goods.length>1" class="headerSelect"  :class="{active: goodsSelectShow}">
				<view class="headerSelectOption">
					<image src="../../static/logo.png"/>
					<view>的方式发生213131231231321122312s</view>
				</view>
				<view class="headerSelectOption">
					<image src="../../static/logo.png"/>
					<view>的方式发生213131231231321122312s</view>
				</view>
				<view class="headerSelectOption">
					<image src="../../static/logo.png"/>
					<view>的方式发生213131231231321122312s</view>
				</view>
				<view class="headerSelectOption">
					<image src="../../static/logo.png"/>
					<view>的方式发生213131231231321122312s</view>
				</view>
			</view>
		</view>
		<view class="goodsContent">
			<textarea placeholder-style="fontSize:15rpx;" maxlength="100" v-model="evaluateParams.content" placeholder="给你购买的宝贝一个评价吧有机会参与平台的抽奖哦"></textarea>
			<u-upload max-count="6" ref="upload" :action="'http://gmall-h5-api.atguigu.cn/admin/product/fileUpload'" :file-list="fileList" :before-upload="beforeUpload" @on-success="onSuccess" @on-remove="onRemove">
			</u-upload>
		</view>
		<view class="rate">
			<view>综合评分:</view>
			<u-rate :current="5" v-model="evaluateParams.score" :size="20"></u-rate>
		</view>
		<view class="footerBtn" @click="sumbitEvaluate">提交评价</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import { reactive,ref, nextTick } from 'vue'
	import { order } from '@/api'
	// 控制选择的商品多选的显示属性
	let goodsSelectShow = ref(false)
	// 控制选择商品选择的回调
	function selectGoods() {
		goodsSelectShow.value = !goodsSelectShow.value
	}
	// 评价参数
	let evaluateParams = reactive({
		goods_id: '',
			attr: '',
		 content: '',
		  images: '',
		   score: 0,
		     uid: '',
		 orderId:''
	})
	let detail = reactive({
		d: {},
		goodsDetail: {}
	})
	// 默认显示的图片
	let fileList = ref([])
	// 接口成功返回的图片
	let successImage = ref([])
	// 上传图片 组件
	let upload = ref(null)
	function beforeUpload(index,list){
		return true
	}
	
	function onSuccess(data, index, lists){
		if(data.code === 200) {
			successImage.value.push(data.data)
		}else{
			nextTick(() => {
				uni.$u.toast('图片不符合规则')
				upload.value.remove(index)
			})
		}
	}
	function onRemove(index, lists, name) {
		successImage.value.splice(index,1)
	}
	// 提交评价
	function sumbitEvaluate() {
		if(!evaluateParams.content) {
			uni.$u.toast('请评论')
			return
		}
		if(evaluateParams.score === 0) {
			uni.$u.toast('请选择评分')
			return
		}
		// 整理参数
		evaluateParams.score+=''
		evaluateParams.images = successImage.value.join(',')
		// 发送请求
		order.reqSubmitEvaluate(evaluateParams).then(res => {
			if(res.code === 1) {
				uni.$u.toast(res.msg)
				uni.redirectTo({
					url: '/pages/evaluate/evaluateSeccuss'
				})
			}
		}).catch((err) =>{
			uni.$u.toast(err.msg)
		})
	}
	onLoad((options) => {
		let enDetail  = JSON.parse(decodeURI(options.enDetail))
		detail.d = enDetail
		detail.goodsDetail = enDetail.goods[0]
		evaluateParams.uid = enDetail.uid
		evaluateParams.orderId = enDetail._id
		evaluateParams.goods_id = enDetail.goods[0].goods_id
		evaluateParams.attr = enDetail.goods[0].attr
	})
</script>

<style lang="scss">
.header{
	padding: 15rpx;
	position: relative;
	&Show{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		z-index: 9999;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 20rpx;
			margin-right: 15rpx;
		}
		view{
			flex: 1;
			font-size: 25rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: pre-wrap;
			word-break: break-all;
		}
		text{
			font-size: 15rpx;
			transition: .5s ;
			&.active{
				transform: rotate(180deg);
			}
		}
	}
	&Select{
		position: absolute;
		left: 0;
		right: 0;
		padding: 15rpx;
		padding-bottom: 0;
		background-color: #f1f1f1;
		transition: 0.2s;
		transform: translateY(-100%);
		visibility: hidden;
		z-index: 999;
		&Option{
			margin-bottom: 15rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 20rpx;
				margin-right: 15rpx;
			}
			view{
				flex: 1;
				font-size: 25rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		&.active{
			visibility: visible;
			transition: 0.2s;
			transform: translateY(0);
		}
	}
}

.goodsContent{
	padding: 15rpx;
	margin: 15rpx 0;
	textarea{
		height: 210rpx;
		font-size: 15rpx;
	}
}
.rate{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15rpx;
	padding-right: 0;
	view{
		margin-right: 50rpx;
		font-size: 40rpx;
	}
}
.footerBtn{
	width: 250rpx;
	margin: 0 auto;
	text-align: center;
	padding: 15rpx;
	background-color: #e1e1e1;
	color: #ffffff;
	font-size: 35rpx;
	border-radius: 20rpx;
}
.footerBtn:active{
	opacity: 0.5;
}
.slot-btn {
	width: 341rpx;
	height: 140rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgb(244, 245, 246);
	border-radius: 10rpx;
}

.slot-btn__hover {
	background-color: rgb(235, 236, 238);
}


</style>